<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" th:href="@{backed/assets/images/favicon.png}">
  <title>Material Pro Admin Template - The Most Complete & Trusted Bootstrap 4 Admin Template</title>
  <!-- Bootstrap Core CSS -->
  <link th:href="@{backed/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
  <!-- Custom CSS -->
  <link th:href="@{backed/css/style.css}" rel="stylesheet">
  <link th:href="@{backed/js/layui.css}" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link th:href="@{backed/css/colors/blue.css}" id="theme" rel="stylesheet">
  <link th:href="@{backed/assets/plugins/element-ui/index.css}" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    .demo-table-expand {
      font-size: 0;
    }

    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  </style>
</head>

<body class="fix-header fix-sidebar card-no-border">

<div class="preloader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
  </svg>
</div>

<div id="main-wrapper">

  <div th:replace="~{commons/commons::topbar}"></div>

  <div th:replace="~{commons/commons::sidebar}"></div>

  <div class="page-wrapper">

    <div class="container-fluid">

      <div class="row page-titles">
        <div class="col-md-5 col-8 align-self-center">
          <h3 class="text-themecolor m-b-0 m-t-0">歌单模块</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active">歌单</li>
          </ol>
        </div>

      </div>

      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-block" id="PlayListModel">
              <h2 class="card-title" style="display: inline-block; width: 60%">PlayList Model</h2>
              <!--              @blur="selectKeyWord"-->
              <el-input type="text" @blur="selectKeyWord" style="max-height: 28px;max-width: 200px"
                        placeholder="歌单ID" v-model:value="keyword" lay-on="test-tips-color"></el-input>&nbsp;&nbsp;&nbsp;
              <br>
              <span class="card-subtitle addSong"
                    lay-on="test-page-title">PlayList Count<code>.&nbsp;{{ page.count }}</code>
              </span>

              <div class="table-responsive">
                <template>
                  <el-table :data="dataList" style="width: 100%">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="创建者">
                            <span>{{ props.row.creatorUser }}</span>
                          </el-form-item>
                          <el-form-item label="创建时间">
                            <span>{{ props.row.createdAt }}</span>
                          </el-form-item>
                          <el-form-item label="收藏量">
                            <span>{{ props.row.col }}</span>
                          </el-form-item>
                          <el-form-item label="浏览量">
                            <span>{{ props.row.views }}</span>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>

                    <el-table-column
                        label="#"
                        type="index"
                        :index="indexMethod">
                    </el-table-column>

                    <el-table-column
                        label="歌单ID"
                        prop="playListId">
                    </el-table-column>
                    <el-table-column
                        label="歌单名称"
                        prop="playListName">
                    </el-table-column>
                    <el-table-column
                        label="歌单描述"
                        prop="info">
                    </el-table-column>
                    <el-table-column label="操作" >
                      <template slot-scope="scope">
                        <el-button type="primary" plain @click="delPlayList(scope.$index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
                <el-pagination @current-change="handleCurrentChange" :current-page=1
                               :page-size="page.pageSize" layout="total, prev, pager, next, jumper"
                               :total="page.count">
                </el-pagination>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>

    <div th:replace="commons/commons::footer"></div>

  </div>

</div>
<script th:src="@{backed/assets/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script th:src="@{backed/assets/plugins/bootstrap/js/tether.min.js}"></script>
<script th:src="@{backed/assets/plugins/bootstrap/js/bootstrap.min.js}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script th:src="@{backed/js/jquery.slimscroll.js}"></script>
<!--Wave Effects -->
<script th:src="@{backed/js/waves.js}"></script>
<!--Menu sidebar -->
<script th:src="@{backed/js/sidebarmenu.js}"></script>
<!--stickey kit -->
<script th:src="@{backed/assets/plugins/sticky-kit-master/dist/sticky-kit.min.js}"></script>
<!--Custom JavaScript -->
<script th:src="@{backed/js/custom.min.js}"></script>
<script th:src="@{backed/js/vue.js}"></script>
<script th:src="@{backed/js/layui.js}"></script>
<script th:src="@{backed/assets/plugins/element-ui/index.js}"></script>
<script th:src="@{backed/js/content/pages-blank.js}"></script>
<script th:replace="~{commons/commons::topbar_vue}"></script>

<script th:inline="javascript">


  const PlayListModel = new Vue({
    el: "#PlayListModel",
    data: {
      page: {
        //4.1页码
        pageIndex: 0,
        //4.2每页显示条数
        pageSize: 8, //设置每页显示条数
        //4.3分页查询条件
        playList: {
          playListName: "",
          creatorUser: "",
        },
        //4.4歌单总数
        count: 0,
      },
      //1、歌单集合
      dataList: null,

      keyword: "",

      bianhao: 0

    },
    mounted: function () {
      //1、加载渲染默认歌单信息
      this.selectSongListPlus(this.page)
    },
    methods: {
      //1*批量查询
      selectSongListPlus(data) {
        let that = this;
        selectPlayListApi(data).done(function (res) {
          if (res.code === 200) {
            //1、数据添加到数据集dataList，并渲染至页面
            PlayListModel.dataList = res.data.list;
            PlayListModel.page.count = res.data.count;
            console.log(PlayListModel.dataList)
          } else {
            //2、提示信息
            that.$message({
              type: 'warning',
              message: '网络繁忙'
            });
          }

        })
      },
      //2 当前页码变化发送事件，请求接口数据
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page.pageIndex = val - 1;
        //发送请求
        this.selectSongListPlus(this.page)
      },
      //3、搜索框移出事件，请求接口数据
      selectKeyWord() {
        let that = this;
        //清空索引
        that.page.pageIndex = 0;
        that.page.playList.playListName = that.keyword;
        that.page.playList.creatorUser = that.keyword;
        that.selectSongListPlus(that.page)
      },

      //4、编号
      indexMethod(index) {
        return index = index + 1;
      },
      //5、删除歌单
      delPlayList(data) {
        let that = this;
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否删除此歌单: '),
            h('i', {style: 'color: teal'}, that.dataList[data].playListName)
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {

              //调用删除接口
              delPlayListApi(that.dataList[data].playListId).done(function (res) {
                if (res.code === 200) {
                  instance.confirmButtonLoading = true;
                  instance.confirmButtonText = '执行中...';
                  setTimeout(() => {
                    done();
                    setTimeout(() => {
                      instance.confirmButtonLoading = false;
                    }, 300);
                  }, 600);
                } else {
                  that.$message({
                    type: 'warning',
                    message: '网络繁忙'
                  });
                }
              })
            } else {
              done();
            }
          }
        }).then(action => {
          //刷新记录
          that.clearT(that)
          this.selectSongListPlus(this.page)
          that.$message({
            type: 'success',
            message: '成功删除一个歌单！'
          });
        });
      },
      //7、清空条件
      clearT(that) {
        that.page.pageIndex = 0;
        that.page.playList.playListName = "";
        that.page.playList.creatorUser = "";
      }


    }
  })
  // 搜索框小提示
  layui.use(function () {
    var layer = layui.layer;
    var util = layui.util;
    // 事件
    util.on('lay-on', {
      'test-tips-color': function () {
        layer.tips('失去焦点,自动检索', this, {
          tips: [1, '#1e9fff']
        });
      },
    })
  });
</script>
</body>

</html>
<script setup lang="ts">
</script>